<template>
  <div class="box">
    <main class="app-main">
      <div class="container">
        <div class="top" style="display: flex; justify-content: space-between">
          <!--          新增-->
            <div class="btn-container">
              <el-button
                @click="() => { form.type = 1; dialogVisible = true;  }"
               type="primary"
               style="background-color: #000; border-color: #000" >+ 新增菜品分类</el-button>
              <el-button @click="() => { form.type = 2; dialogVisible = true; }" type="primary">+ 新增套餐分类</el-button>
            </div>
        </div>
<!--      弹窗-->


        <!--          表格-->
        <div class="table">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="分类名称" />
            <el-table-column prop="type" label="分类类型" :formatter="formatStatus" width="180"/>
            <el-table-column prop="createTime" label="操作时间" />
            <el-table-column prop="sort" label="排序" />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="edit(scope.row)"
                >
                  编辑
                </el-button>
                <span class="btn-divider" />
                <el-popconfirm
                  title="确认删除吗?"
                  @onConfirm="del(scope.row.id)"
                >
                <el-button
                  slot="reference"
                  size="mini"
                  type="text"
                  style="color: #f56c6c"
                >
                  删除
                </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页组件 -->
        <div class="page-container">
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="params.page"
            :limit.sync="params.pageSize"
            @pagination="getCategoryList"
          />
        </div>
<!--        弹窗-->
          <el-dialog
                      :title="form.type === 1 ? '新增菜品分类' : '新增套餐分类'"
                       :visible.sync="dialogVisible"
                      @close="resetForm"
                        width="500px">
            <el-form label-width="120px">
              <el-form-item label="分类名称:">
                <el-input placeholder="请输入分类名称" v-model="form.name" />
              </el-form-item>
              <el-form-item label="排序:">
                <el-input placeholder="请输入排序" v-model.number="form.sort" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-fotter">
              <el-button @click="()=> {dialogVisible = false;resetForm()}">取消</el-button>
              <el-button
                type="primary"
                style="background-color: #ffb000; border-color: #ffb000"
                @click="saveForm"
              >确定</el-button>
              <el-button
                type="primary"
                style="background-color: #000; border-color: #000"
                @click="saveAndContinue"
              >保存并继续添加</el-button>
            </div>
          </el-dialog>
        <el-dialog
          title="修改分类"
          :visible.sync="editdialogVisible"
          @close="resetForm"
          width="500px">
          <el-form label-width="120px">
            <el-form-item label="分类名称:">
              <el-input placeholder="请输入分类名称" v-model="form.name" />
            </el-form-item>
            <el-form-item label="排序:">
              <el-input placeholder="请输入排序" v-model.number="form.sort" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-fotter">
            <el-button @click="()=> {editdialogVisible = false;}">取消</el-button>
            <el-button
              type="primary"
              style="background-color: #ffb000; border-color: #ffb000"
              @click="editBtn"
            >确定</el-button>
          </div>
        </el-dialog>
      </div>
    </main>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { addCategoryAPI, delCategoryAPI, editCategoryAPI, getCategoryListAPI } from '@/api/category'
import row from 'element-ui/packages/row'
export default {
  computed: {
    row() {
      return row
    }
  },
  components: { Pagination },
  data() {
    return {
      params: {
        page: 1,
        pageSize: 10
      },
      tableData: [],
      total: 0,
      // 弹窗显示状态
      dialogVisible: false,
      editdialogVisible: false,
      // 表单数据
      form: {
        id: null,
        name: '', // 分类名称
        sort: null, // 排序
        type: null // 弹窗类型：1=菜品分类，2=套餐分类
      }
    }
  },
  created() {
    this.getCategoryList()
  },
  methods: {
    //  保存
    async saveForm() {
      if (!this.form.name) {
        this.$message.warning('请输入分类名称');
        return
      }
      if (!this.form.sort) {
        this.$message.warning('请输入排序');
        return
      }
      // 调用接口
      delete this.form.id
      await addCategoryAPI(this.form)
      this.$message.success('添加成功')
      this.dialogVisible = false
      this.getCategoryList()
    },
    async saveAndContinue(){
      if (!this.form.name) {
        this.$message.warning('请输入分类名称');
        return
      } if (!this.form.sort) {
        this.$message.warning('请输入排序');
        return
      }
      // 调用接口
      delete this.form.id
      await addCategoryAPI(this.form)
      this.$message.success('添加成功')
      this.resetForm()
      this.form.type = 2
      this.getCategoryList()
    },
    // 重置表单
    resetForm() {
      this.form = {
        id: null,
        name: '',
        sort: null,
        type: null
      }
    },
    // 获取列表数据
    async getCategoryList() {
      const res = await getCategoryListAPI(this.params)
      console.log(res.data)
      this.tableData = res.data.records
      this.total = res.data.total
    },
    // 编辑
    edit(row){
      this.editdialogVisible = true
      this.form = {
        id: row.id,
        name: row.name,
        sort: row.sort
      }
    },
   async editBtn(){
     console.log(this.form)
    await editCategoryAPI(this.form)
     this.$message.success('编辑成功')
     this.editdialogVisible = false
     this.getCategoryList()
    },
    // 删除
    async del(id){
     await delCategoryAPI(id)
      this.$message.success('删除成功')
      this.getCategoryList()
    },
    // 格式化状态
    formatStatus (row, column, cellValue, index) {
      const MAP = {
        1: '菜品分类',
        2: '套餐分类'
      }
      return MAP[cellValue]
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  background: #f4f6f8;
  padding: 17px;
  margin: 0;
  .app-main {
    background: #ffffff; // 页面主区域背景改为白色
    padding: 20px;
    .container {
      background-color: #ffffff; // 内容容器背景改为白色
    }
  }
}

/* 覆盖 Element-UI 表格默认背景，确保整体白色 */
.el-table {
  background-color: #ffffff !important;
}
 .el-table__header,
.el-table__body {
  background-color: #ffffff !important;
}
.page-container {
  text-align: center;
  margin-top: 20px;
}
/* 表格外层容器添加边框（外层边框） */
.table {
  margin-top: 20px;
  border: 1px solid #e4e7ed; /* Element UI 常用边框色，可根据需求调整 */
  border-radius: 4px; /* 可选：添加轻微圆角更美观 */
}

/* 去除表格列之间的边框 */
.el-table {
  background-color: #ffffff !important;
  border: none; /* 取消表格自身的默认边框，避免与外层容器边框重叠 */
}

/* 去除表头单元格的左右边框 */
.el-table__header th.el-table__cell {
  border-right: none !important; /* 取消列之间的竖线 */
}

/* 去除表体单元格的左右边框 */
 .el-table__body td.el-table__cell {
  border-right: none !important; /* 取消列之间的竖线 */
}

/* 可选：去除表格底部的默认横线（如果不需要） */
 .el-table::before {
  height: 0; /* 隐藏表格底部的横线 */
}
.btn-divider {
  display: inline-block;
  height: 12px; /* 竖线高度，可根据按钮字号调整 */
  margin: 0 6px; /* 左右间距，控制竖线与按钮的距离 */
  border-left: 1px solid #e4e7ed; /* 竖线颜色（浅灰色，营造“隐约”效果） */
  vertical-align: middle; /* 垂直居中，与按钮对齐 */
}

</style>
